<template>
  <div class="app-container">
    <k-button class="top-btn" value="创建支付" @click.native="addItemDialog" :disabled="!authorityHandle(161)"/>

    <!--表格相关 -->
    <el-table
      ref="dragTable"
      row-key="id"
      :data="listData"
      border
      fit
      highlight-current-row
      style="width: 100%; border-radius: 8px; margin-top: 30px;"
      :header-cell-style="{ background: '#F6F5FA', color: '#4E4F62' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column min-width="60px" type="index" label="序号" align="center" />
      <el-table-column prop="name" min-width="100px" label="支付名称" align="center" />
      <el-table-column prop="type" min-width="100px" label="支付类型" align="center">
        <template slot-scope="scope">
          {{ scope.row.type === 1 ? '支付宝' : '微信' }}
        </template>
      </el-table-column>
      <el-table-column min-width="80px" label="开关" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#3b425d"
            inactive-color="#E9EBF2"
            active-text="开"
            inactive-text="关"
            :active-value="true"
            :inactive-value="false"
            :disabled="!authorityHandle(161)"
            @change="updateActStatus($event,scope)"
          />
        </template>
      </el-table-column>
      <el-table-column min-width="200px" label="操作" align="center">
        <template slot-scope="scope">
          <div class="op-div">
            <k-button class="table-btn" :disabled="!authorityHandle(161)" value="查看/修改" @click.native="updateActivityDialog(scope.row)" />
            <k-button class="table-btn" :disabled="!authorityHandle(161)" value="区间配置" @click.native="activitySortDialog(scope.row)" />
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.pager.pageNo"
      :limit.sync="listQuery.pager.pageSize"
      @pagination="loadData"
    />
    <!-- 消费档位设置 -->
    <k-dialog
      :show-hide.sync="payStepSettingDialog.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      class="addBox-dialog"
      title="档位配置"
      :show-foot="false"
      :two-btn="authorityHandle(161)"
      @click="saveChargeData"
    >
      <div v-for="(item,index) in chargeSetting.itemList" :key="item.id" class="Recharge_Data">
        <div class="Recharge_Data_box">
          <span>消费档位:</span>
          <el-input v-model.number="item.rechargeAmount" :readonly="!authorityHandle(161)" style="margin-right:20px" />
          <span>消费赠送:</span>
          <el-input v-model.number="item.givePercent" :readonly="!authorityHandle(161)" /> %
        </div>
        <div class="operation">
          <i v-if="authorityHandle(161)" v-show="index != 0" class="el-icon-remove" @click="Delete(item.id)" />
          <i v-if="authorityHandle(161)" v-show="index == chargeSetting.itemList.length - 1" class="el-icon-circle-plus" @click="newly_added()" />
        </div>
      </div>
    </k-dialog>
    <k-dialog
      :show-hide.sync="customBaby.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="创建支付"
      class="customBaby-dialog"
      :show-foot="false"
      :two-btn="true"
      @click="saveManualData"
    >
      <el-form :model="customBabyInfo" label-width="auto">
        <el-form-item label="支付名称：" prop="exteriorId">
          <el-input v-model="customBabyInfo.name" placeholder="请输入支付名称" />
        </el-form-item>
        <el-form-item label="支付key：" prop="categoryId">
          <el-input v-model="customBabyInfo.key" placeholder="请输入支付key" />
        </el-form-item>
        <el-form-item label="支付方式：">
          <el-select
            v-model="customBabyInfo.type"
            style="width: 100%;"
            placeholder="请选择"
            :disabled="!authorityHandle(43)"
          >
            <el-option v-for="item in payList" :key="item.lineId" :label="item.lineName" :value="item.lineId" />
          </el-select>
        </el-form-item>
      </el-form>
    </k-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import Sortable from 'sortablejs'

import {
  payChannel, payChannelStatus, CreatePayChannel, updatePayChannel, payChannelSort
} from '@/api/settings/paysetting'
import { getSettingItem, saveSettingItem } from '@/api/settings/paysetting'

export default {
  name: 'Extension',
  components: { Pagination },
  dicts: ['IDENTITY_TYPE'],
  data() {
    return {
      payList: [{ lineId: 2, lineName: '微信' }, { lineId: 1, lineName: '支付宝' }],
      listData: [],
      multipleSelection: [],
      customBabyInfo: {
        name: undefined,
        key: undefined,
        type: undefined
      },
      customBaby: {
        showHide: false,
        isUpdate: false
      },
      payStepSettingDialog: {
        showHide: false
      },
      chargeSetting: { // 首充赠送
        id: 0,
        itemList: [{
          rechargeAmount: undefined, // 消费挡位',
          givePercent: undefined // 消费赠送'
        }]
      },
      totalRows: 0, // 分页组件--数据总条数
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: '',
          start: ''
        }
      }
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    saveManualData() {
      if (this.customBaby.isUpdate) {
        updatePayChannel(this.customBabyInfo).then(res => {
          this.$message.success('修改成功')
          this.loadData()
        })
      } else {
        CreatePayChannel(this.customBabyInfo).then(res => {
          this.$message.success('添加成功')
          this.loadData()
        })
      }
      this.customBaby.isUpdate = false
      this.customBaby.showHide = false
    },
    // 创建支付
    addItemDialog() {
      this.customBaby.isUpdate = false

      this.customBaby.showHide = true
    },
    // 修改支付
    updateActivityDialog(v) {
      this.customBabyInfo = v
      this.customBabyInfo.id = v.id
      this.customBaby.isUpdate = true
      this.customBaby.showHide = true
    },
    // 修改区间配置
    activitySortDialog(v) {
      this.chargeSetting.id = v.id
      this.payStepSettingDialog.showHide = true
      getSettingItem({ 'id': v.id }).then(res => {
        this.chargeSetting.itemList = res.data
      })
    },
    loadData() {
      payChannel(this.listQuery).then(res => {
        console.log(res)
        const data = res.data
        this.listData = data
        this.$nextTick(() => {
          this.setSort()
        })
        // this.totalRows = data.totalRows
      })
    },
    // 开关
    updateActStatus(event, scope) {
      payChannelStatus(
        { id: scope.row.id, status: { status: scope.row.status }}
      ).then(res => {
        if (res.data.success) {
          this.$message.success(res.data.msg)
          this.loadData()
        } else {
          this.$message.error(res.data.msg)
          scope.row.activityStatus = 2
        }
      })
    },
    // 设置新增
    newly_added() {
      this.chargeSetting.itemList.push({
        rechargeAmount: undefined, // 消费挡位',
        givePercent: undefined // 消费赠送'
      })
    },
    // 设置删除
    Delete(value) {
      var index = this.chargeSetting.itemList.findIndex(function(item) {
        return item.id === value
      })
      if (index !== -1) {
        this.chargeSetting.itemList.splice(index, 1)
      }
    },
    // 消费档位保存
    saveChargeData() {
      saveSettingItem(this.chargeSetting).then(res => {
        this.$message.success('保存成功')
        this.payStepSettingDialog.showHide = false
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    setSort() {
      const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
      this.sortable = Sortable.create(el, {
        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
        setData: function(dataTransfer) {
          // to avoid Firefox bug
          dataTransfer.setData('Text', '')
        },
        onEnd: evt => {
          // const targetRow = this.boxList.splice(evt.oldIndex, 1)[0]
          const targetRow = this.listData.splice(evt.oldIndex, 1)[0]
          this.listData.splice(evt.newIndex, 0, targetRow)
          this.listData.map((item, index) => {
            item.sort = index
          })
          // 等级福利列表页更新排序
          payChannelSort(this.listData).then(res => {
            this.$log(res)
          })
        }
      })
    },
    // 搜索查询事件
    handleFilter() {
      this.listQuery.pager.pageNo = 1
      this.loadData()
    }
  }
}
</script>

<style lang="scss" scoped>
.customBaby-dialog{
  ::v-deep .el-dialog__body{
    padding: 10px 100px;
  }

 ::v-deep .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    color: #909399;
    font-size: 40px;
  }
}
.top-btn{
  margin-top: 30px;
}
.filter-container {
  width: 100%;
  height: 48px;
  line-height: 48px;

  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }

  .right-item {
    margin-right: 10px;
  }

  .kInput {
    position: absolute;
    right: 20px;
  }

  .filter-title {
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    font-weight: 500;
    margin-right: 22px;
    color: #14162E;
  }

  .user-item {
    margin-left: 10px;
    margin-right: 20px;
  }

  .user-status,
  .account-status {
    margin-right: 20px;
  }
}
.Recharge_Data {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  color: #000;
  .Recharge_Data_box {
    width: 80%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-input {
      width: 100px;
      height: 35px;
      input {
        width: 100px;
        height: 35px;
      }
    }
    span {
      font-size: 14px;
      width: 100px;
    }
  }
  .operation {
    width: 12%;
    display: flex;
    justify-content: space-between;
    .el-icon{
        &-circle-plus, &-remove{
          font-size: 22px;
          color:#3b425d;
          margin-left: 10px;

      }
    }

  }
}
</style>
